<template>
    <div class="site">
        <!-- 地址导航栏 -->
        <van-nav-bar
            title="我的收货地址"
            right-text="新增地址"
            left-arrow
            @click-left="$router.go(-1)"
            @click-right="$router.push('/addsite')"
        />
        <!-- 地址列表 -->
        <div class="sit_list">
            <div class="sit_text" v-for="(item,index) in sitelist" :key="index">
                <div class="name">
                    <div>{{item.address}}</div>
                    <div><span>{{item.name}}</span><span>{{item.phone}}</span></div>
                </div>
                <div class="ivon">
                    <van-icon name="edit" size="25" @click="tosite(item)" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 映射vuex中的数据地址
import { mapState } from 'vuex';
export default {
    computed:{
        ...mapState(['sitelist'])
    },
    methods:{
        tosite(item){
            var obj=JSON.stringify(item);
            this.$router.push({path:'/altersite/',query:{obj}});
        }
    }
    
}
</script>

<style lang="scss" scoped>
    .site{
        padding: 10px 0 0 0 ;
        .sit_list{
            width: 100%;
            padding: 10px 20px;
            box-sizing: border-box;
            .sit_text{
                display: flex;
                justify-content: space-between;
                margin-bottom: 20px;
                .name{
                    div:nth-child(1){
                        font-weight: 600;
                        color: #555;
                    }
                    div:nth-child(2){
                        color: #999;
                        font-size: 14px;
                        margin: 10px 0;
                    }

                }
                .ivon{
                    display: flex;
                    align-items: center;
                    color: #999;
                }
            }
        }
    }
</style>